import {Avatar, Button, Card, Descriptions, Image, List, Tabs} from 'antd';
import React, {useEffect, useState} from 'react';
import {PageContainer} from '@ant-design/pro-layout';
import {goto, isSuccess} from "@/utils/utils";
import {WorksManager} from "@/services/api-functions";
import {SYS_ENUMS} from "@/utils/constants";
import styles from './style.less';
import 'braft-editor/dist/index.css'
import {contentDetailAudit} from "@/pages/work/detail";

const ArticleDetail: React.FC<any> = ({match: {params: {id}}}) => {

  const [article, setArticle] = useState<any>(undefined)
  const [auditLogs, setAuditLogs] = useState<any[]>([])

  const queryArticleDetail = (sid: number)=>{
    if(sid){
      WorksManager.articleDetail(sid).then(({code, data}) => {
        if (isSuccess(code)) {
          setArticle(data)
        }
      })

      WorksManager.worksLog(sid).then(({code, data}) => {
        if (isSuccess(code)) {
          setAuditLogs(data??[])
        }
      })
    }
  }

  useEffect(() => queryArticleDetail(id), [id])

  return (
    <PageContainer>
      <Card bordered={false}
            actions={article?.auditState==='ING'?[<span></span>, <span></span>,
              <span style={{float: 'right', paddingRight: 17}}>
                <Button style={{marginRight: 17}}
                        onClick={() => contentDetailAudit(article?.id, SYS_ENUMS.RESOURCE_AUDIT_STATE.REFUSE.value,
                          "", "ARTICLE_AUDIT", () => queryArticleDetail(id))}>驳回</Button>
                <Button type='primary'
                        onClick={() => contentDetailAudit(article?.id, SYS_ENUMS.RESOURCE_AUDIT_STATE.PASS.value, "",
                          "ARTICLE_AUDIT", () => queryArticleDetail(id))}>通过</Button>
              </span>] : []}>
        <Tabs destroyInactiveTabPane={true} tabBarExtraContent={<Button type='primary' onClick={() => goto(`/article/edit/${id}`)}>编辑</Button>}>
          <Tabs.TabPane forceRender tab='文章信息' key="ARTICLE_BASIC_INFO">
            <Descriptions title="基本信息" style={{ marginBottom: 32 }}>
              <Descriptions.Item label="文章ID">{id}</Descriptions.Item>
              <Descriptions.Item label="文章标题">{article?.title}</Descriptions.Item>
              <Descriptions.Item label="所属设计师">{article?.userDto.nickName}</Descriptions.Item>
              <Descriptions.Item label="原创分类">{article?.worksNature?SYS_ENUMS.WORKS_NATURE[article?.worksNature]?.label:'-'}</Descriptions.Item>
              <Descriptions.Item label="原文链接">{article?.originalUrl}</Descriptions.Item>
              <Descriptions.Item label="版权声明">{article?.copyrightType?SYS_ENUMS.ARTICLE_COPYRIGHT_TYPE[article?.copyrightType]?.label:'-'}</Descriptions.Item>
              <Descriptions.Item label="标签">
                {
                  article?.labelList?.map((tag: any, index: number) => `${index > 0 ? ',' : ''}${tag?.name}`)
                }
              </Descriptions.Item>
              <Descriptions.Item label="审核状态">{article?.auditState?SYS_ENUMS.RESOURCE_AUDIT_STATE[article?.auditState]?.label:'-'}</Descriptions.Item>
              <Descriptions.Item label="是否推荐">{article?.recommend?'是':'否'}</Descriptions.Item>
              <Descriptions.Item label="是否置顶">{article?.headFixed?'是':'否'}</Descriptions.Item>
              <Descriptions.Item label="关联资源/文章">{article?.userDto.nickName}</Descriptions.Item>
              <Descriptions.Item label="文章字数">{article?.worksContentSize}</Descriptions.Item>
              <Descriptions.Item label="文章图片数">{article?.worksImgSize}</Descriptions.Item>
              <Descriptions.Item label="编辑时间">{article?.gmtModified}</Descriptions.Item>
              <Descriptions.Item label="发布时间">{article?.gmtCreate}</Descriptions.Item>
            </Descriptions>
            <Descriptions title="数据统计" style={{ marginBottom: 32 }}>
              <Descriptions.Item label="浏览量">{article?.browseNum}</Descriptions.Item>
              <Descriptions.Item label="点赞数量">{article?.greatNum}</Descriptions.Item>
              <Descriptions.Item label="评论数量">{article?.replyNum}</Descriptions.Item>
              <Descriptions.Item label="收藏数量">{article?.focusNum}</Descriptions.Item>
              <Descriptions.Item label="分享数量">{article?.shareNum}</Descriptions.Item>
            </Descriptions>
            <Descriptions title="详细内容" style={{ marginBottom: 32 }} column={1}>
              <Descriptions.Item label="内容">{article?.content}</Descriptions.Item>
              <Descriptions.Item label="封面">
                {
                  article?.cover && <Image src={article?.cover?.url} title={article?.name}/>
                }
              </Descriptions.Item>
              <Descriptions.Item label="附件">{article?.resourcesAttachment?.url}</Descriptions.Item>
            </Descriptions>
          </Tabs.TabPane>
          <Tabs.TabPane forceRender tab='审核日志' key="ARTICLE_AUDIT_LOG">
            <div className={styles.title}>操作日志</div>
            <List
              itemLayout="horizontal"
              dataSource={auditLogs}
              renderItem={({userDto, gmtCreate, auditRemark, type}) => <List.Item>
                <List.Item.Meta
                  avatar={<Avatar src={userDto?.avatarUrl} />}
                  title={userDto?.nickName}
                  description={`备注: ${auditRemark??'暂无'}`}
                />
                <div>{`${SYS_ENUMS.OPERATE_TYPE[type]?.label}   ${gmtCreate} `}</div>
              </List.Item>}
            />
          </Tabs.TabPane>
        </Tabs>
      </Card>
    </PageContainer>
  );
};

export default ArticleDetail;
